
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        html{color:#c8c8c8;background:#FFF;} 
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form, 
        fieldset,input,textarea,p,blockquote,th,td { 
        margin:0; 
        padding:0; 
        }
        .boxAll{
          width: 861px;
          padding:20px 23px 6px 20px;;
          margin:100px auto;
        }
        .Box{
            width: 861px;
            border: 1px solid #e1e1e1;
            box-shadow:  3.3px 1.6px 1.6px hsl(0deg 0% 0% /0.20);
        }
        .tabs-row{
          overflow: hidden;
          border-bottom: 1px solid #e1e1e1;
        }
        .tabs{
          width: 86px;
          height: 45px;
          line-height: 45px;
          text-align: center;
          float: left;
          margin-right: 26px;
          font-size: 15px;
        }
        .con{
            width: 100%;
            margin-top:10px;
            display:none;
        }
        .current{
            color: black;
        }
        .content-row{
          overflow: hidden;
          height: 50px;
          border-bottom: 1px dashed #e1e1e1;
          padding: 0 17px 0 8px;
        }
        .content-row p{
          line-height: 50px;
          color: #848484;
        }
        .content-row p:first-child{
          margin-right: 16px;
        }
        .content-row p:first-child,
        .content-row p:nth-child(2){
          float: left;
        }
        .content-row p:last-child{
          float: right;
        }
        .paging{
          margin-top: 3px;
          overflow: hidden;
        }
        .paging p{
          float: right;
          line-height: 26px;
        }
        .page{
          width: 26px;
          height: 26px;
          background-color: #407bb3;
          border-radius: 5px;
          text-align: center;
          line-height: 26px;
          color: white;
          margin-left: 20px;
          margin-right: 26px;
        }
    </style>
</head>
<body>
  <div class="boxAll">
    <div class="tabs-row">
      <p class="tabs current" >编辑模式</p>
      <p class="tabs">阅读模式</p>
    </div>
    <div style="border: 2px solid black"></div>
    <div class="Box" id="box">
        
        <div class="con" style="display:block">
          <div class="content">
            <div class="content-row">
              <p>●</p>
              <p>第一行的内容</p>
              <p>1</p>
            </div>
            
            <div class="content-row">
              <p>●</p>
              <p>第二行的内容</p>
              <p>2</p>
            </div>
            <div class="paging">
              <p class="page">1</p>
              <p class="count">
                <span>共 </span><span> 6 </span><span> 页</span>
              </p>
              
            </div>
          </div>
        </div>
        <div class="con">内容2</div>
        <div class="con">内容3</div>
    </div>
  </div>
  
<script>
    var box = document.getElementById('box');
    var tabs = document.getElementsByClassName('tabs');
    var divs = box.getElementsByClassName('con')
    for(var i=0;i<tabs.length;i++){
        var btn = tabs[i];
        btn.index = i;
        btn.onclick = function(){

            for(var j=0;j<tabs.length;j++){
                tabs[j].classList.remove('current');
            }
            this.classList.add('current');
            for(var k = 0;k<divs.length;k++){
                divs[k].style.display = 'none';
            }
            divs[this.index].style.display = 'block';
        }
    }
</script>
</body>
</html>

